<template>
    <div :style="{overflowY:'auto',overflowX:'hidden',height: 'calc(100vh - 64px)'}">
        <Card dis-hover class="card">
            <p slot="title">
                <Icon type="md-arrow-dropright" size="16" color="#bd1a2d"/>
                {{title}}
            </p>
            <div slot="extra">
                <Icon type="ios-loop-strong"></Icon>
                <Button v-if="wholeInfo.type==6" type="error" icon="md-cloud-download" @click="exportForm">导出</Button>
				<Button style="margin-left: 3px;" type="error" icon="md-arrow-back" @click="goback">返回</Button>
            </div>
            <List ref="list" :loading="loading" :style="{height: tableHeight-65 + 'px'}">
                <ListItem v-for="(item,index) in wholeList">
                    <div class="articals_child" v-if="wholeInfo.type==6">
                        <a class="articals_child_title1">{{item.attriEreaName}}</a>
                        <a class="articals_child_title1">{{item.checkLevelName}}</a>
                        <a class="articals_child_title1">{{item.problemCategoryName}}</a>
                        <a class="articals_child_title">
                            <tooltip max-width="300" :content="item.problemDesc"  :placement="index<5?'bottom-start':'top-start'">
                                {{item.problemDesc}}
                            </tooltip>
                        </a>
                        <p class="articals_child_date">{{item.createDate}}</p>
                    </div>

                    <div class="articals_child" v-else>
                        <router-link class="articals_child_title" v-if="wholeInfo.type==3"  target="_blank" :to="{path:'/noticeDetail',query:{id:item.id,name:item.name,createDate:item.createDate,type:1}}">{{item.name}}</router-link>
                        <router-link v-else class="articals_child_title" target="_blank" :to="{path: '/artivityArticalPlay', query:{id:item.safeActivityMonthId}}" v-else-if="wholeInfo.type == 5">{{item.title}}</router-link>
                        <router-link class="articals_child_title" target="_blank" :to="{path: '/noticeDetail', query:{source: 'popularization', id:item.popularizationId,name:item.title,createDate:item.createDate,type:item.type==1?4:item.type==0?5:2}}" v-else-if="wholeInfo.type == 4">{{item.title}}</router-link>
                        <router-link v-else class="articals_child_title" target="_blank" :to="{path: item.path, query:{id:item.id,type:0}}">{{item.title}}</router-link>
                        <p class="articals_child_date">{{item.createDate}}</p>
                    </div>
                </ListItem>
            </List>
        </Card>
        <div :style="{marginRight: '9%'}">
            <Row type="flex" justify="end" >
                <i-col>
                    <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                          @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                </i-col>
            </Row>
        </div>
    </div>
</template>

<script>
    import {sessionStorage} from '../../common/cacheUtils.js';
    import {Api} from '../../api/index.js'
    import pageCommonFunction from '@/components/pageCommonFunction.js'

    export default {
        name: "wholePage",
        data(){
            return{
                ...this.createCommonDataField(),
                wholeInfo: {},
                wholeList: [],
                title: "",
                tableHeight: '',
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                loading: false,
                exportUrl:'',
            }
        },
        mounted(){
            this.wholeInfo = this.$route.query;
            this.title = this.$route.query.name;
            this.tableHeight = window.innerHeight - this.$refs.list.$el.offsetTop - 65;
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            query(){
                this.loading = true;
                if(this.wholeInfo.type == 1){
                    this.$http.get(Api.getArticals+"?startPage= "+ this.pagedata.currentPage +" &size="+ this.pagedata.pageSize +"&infoType=3").then(res => {
                        if(res.data.status == 200){
                            this.wholeList = res.data.data.data;
                            this.wholeList.forEach(item=>{
                                item.title = item.infoTitle;
                                item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                                item.path = '/artical';
                                item.id = item.infoId;
                            });
                            this.pagedata.total = res.data.data.totalSize;
                        }
                        this.loading = false;
                    });
                }else if(this.wholeInfo.type == 2){
                    this.$http.get(Api.getNotices+"?startPage="+ this.pagedata.currentPage +"&size="+ this.pagedata.pageSize  +"&type=1&publishOrgId="+sessionStorage('userId').getObject('userId').companyId+"&noticeClassify="+this.$route.query.accountType).then(res => {
                        if(res.data.status == 200){
                            this.wholeList = res.data.data.data;
                            this.wholeList.forEach(item=>{
                                item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                                item.path = '/noticeDetail';
                                item.id = item.proposalId;
                            });
                            this.pagedata.total = res.data.data.totalSize;
                            this.loading = false;
                        }
                    });
                }else if(this.wholeInfo.type == 4){
                    this.$http.get(Api.popularization, {
                        params: {
                            currentPage: this.pagedata.currentPage,
                            size: this.pagedata.pageSize,
                            classify: this.$route.query.accountType
                        }
                    }).then(function(res){
                        this.wholeList = res.data.data;
                        this.wholeList.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        })
                        this.pagedata.total = res.data.totalSize;
                        this.loading = false;
                    }, function(res){
                        this.$Message.error('请求失败');
                    });
                }else if(this.wholeInfo.type == 3){
                    let data = {page: this.pagedata.currentPage, rows: this.pagedata.pageSize, categoryId: this.wholeInfo.id};
                    data = Object.assign(data);
                    this.$http.get(Api.materialsInfo,{
                        params:data,
                    }).then((res) => {
                        this.wholeList = res.data.data;
                        this.wholeList.forEach(item=>{
                            item.createDate = item.createDateStr;
                            // item.path = '/noticeDetail';
                            // item.id = item.proposalId;
                        });
                        this.pagedata.total = res.data.totalSize;
                        this.loading = false;
                    }).catch( e => {
                        this.$Message.error('请求失败');
                    });
                }else if(this.wholeInfo.type == 5){  //安全月
                    let data = {page: this.pagedata.currentPage, rows: this.pagedata.pageSize, categoryId: this.wholeInfo.id};
                    data = Object.assign(data);
                    this.$http.get(Api.safeActivityMonth + "/list",{
                        params:data,
                    }).then((res) => {
                        this.wholeList = res.data.data;
                        this.wholeList.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        });
                        this.pagedata.total = res.data.totalSize;
                        this.loading = false;
                    }).catch( e => {
                        this.$Message.error('请求失败');
                    });
                }else if(this.wholeInfo.type == 6){  //公示台账
                    let data = {
                        startPage: this.pagedata.currentPage,
                        size: this.pagedata.pageSize,
                        conditions: {
                            accountType:this.$route.query.accountType
                        }
                    };
                    data = Object.assign(data);
                    this.$http.post(Api.queryProPublicity,data).then((res) => {
                        this.wholeList = res.data.data.data;
                        this.pagedata.total = res.data.data.totalSize;
                        this.wholeList.forEach(item=>{
                            item.createDate = this.formatDate(new Date(item.createDate), 'yyyy-MM-dd');
                        });
                        this.loading = false;
                    }).catch( e => {
                        this.$Message.error('请求失败');
                    });
                }
            },
			goback(){
				this.$router.go(-1);
			},
            exportForm(){
                this.exportUrl = Api.exportProPublicity
                this.dataToQuery.accountType = this.$route.query.accountType
                this.exportFormSubmit()
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            downloadFile2(id, type){
                type = type == 0 ? 'picture': 'video';
                this.$http.get(Api.interestedPartiesUserFile + "/" + id + "/files/" + type).then((r) => {
                    if (r.data.result == "success") {
                        r.data.data.forEach(item=>{
                            let url = Api.downloadMongoFile + "/" + item.id
                            this.$http.get(url, {
                                responseType: 'blob'      //告诉服务器我们需要的响应格式
                            }).then((res) => {
                                const aLink = document.createElement("a");
                                let blob = new Blob([res.data], {
                                    type: res.body.type      //将会被放入到blob中的数组内容的MIME类型
                                });
                                aLink.href = URL.createObjectURL(blob)
                                aLink.download = item.fileName //标题
                                aLink.click();
                                document.body.appendChild(aLink)
                            })
                        })
                    }
                }).catch(e => {
                    this.$Message.error("文件读取失败");
                });
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            downloadFile(file) {
                this.fileUrl = Api.uploadPTWFiles + '/' + file.id + '/files/doc';
                this.$http.get(this.fileUrl,{
                    params: {},
                }).then((res) => {
                    if(res.data.result == "success"){
                        if(res.data.data.length != 0){
                            // this.docFile = res.data.data[0];
                            // this.docName = res.data.data[0].fileName;
                            console.log( res.data.data[0].id)
                            this.$Modal.confirm({
                                title: '文件下载',
                                content: '<p>是否确定下载</p>',
                                okText: '确认',
                                onOk: () => {
                                    this.$http.get(Api.uploadPTWFiles + '/file/' + res.data.data[0].id, {
                                        responseType: 'blob'      //告诉服务器我们需要的响应格式
                                    }).then((res1) => {
                                        console.log(res1)
                                        const aLink = document.createElement("a");
                                        let blob = new Blob([res1.data], {
                                            type: res1.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                                        });
                                        aLink.href = URL.createObjectURL(blob)
                                        aLink.download = res.data.data[0].fileName //标题
                                        aLink.click()
                                        document.body.appendChild(aLink)
                                    })
                                }
                            });
                        }
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .card {
        argin: 10px;
        width: 80%;
        display: flex;
        flex-direction: column;
        margin: auto auto;
        margin-top: 10px
    }

    .articals_child_title1{
        margin-left: 8px;
        min-width: 180px;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #5C5C5C;
        flex-shrink:0;
        line-height: 30px;
    }

    .articals_child_title{
        flex:auto;
        width:0;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #5C5C5C;
        line-height: 30px;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
        padding-left: 8px;
    }

    .articals_child_date{
        margin-left: 10px;
        width: 95px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #A3A3A3;
        flex-shrink:0;
        line-height: 30px;
    }

    .articals_child{
        width:100%;
        display: flex;
        justify-content: space-between;
    }
    >>> .ivu-card-body {
        padding: 1px;
        overflow-y: auto;
    }
    articals_child:hover .articals_child_date,.articals_child:hover .articals_child_title:hover, qiye_left_top_div_title:hover{
        cursor: pointer;
        color: #F65555;
    }
</style>
